<template>
  <div id="app">
    <header>
      <h1>专家抽取系统</h1>
      <!--
      <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
      -->
      <nav>
        <RouterLink to="/experts" class="nav-link">专家列表</RouterLink>
        <RouterLink to="/professions" class="nav-link">专业列表</RouterLink>
        <RouterLink to="/projects" class="nav-link">工程列表</RouterLink>
        <RouterLink to="/expert-extractions" class="nav-link">专家抽取</RouterLink>
        <RouterLink to="/logout" custom v-slot="{ navigate }">
          <button @click="navigate"  class="nav-button">注销</button>
        </RouterLink>
        <RouterLink :to="{ path: '/about' }" class="nav-link">关于</RouterLink>
        
      </nav>
    </header>
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<script setup>

const navigate = (event) => {
  this.$router.push("/apigateway/logout"); // 手动跳转
};
</script>

<style scoped>
/* 让整个页面占满视口 */
html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 让整个应用铺满屏幕 */
}

/* 头部样式 */
header {
  background-color: #007bff;
  color: white;
  padding: 10px;
  text-align: center;
}

/* 导航栏样式 */
nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px;
  background-color: #0056b3;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: #004080;
}

/* 当前路由高亮 */
.router-link-active {
  background-color: #003366;
}

/* 统一样式 */
.nav-link, .nav-button {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 5px;
  transition: background-color 0.3s;
  background-color: #0056b3;
  border: none;
  cursor: pointer;
}

/* 鼠标悬停时的样式 */
.nav-link:hover, .nav-button:hover {
  background-color: #004080;
}

/* 激活路由的样式 */
.router-link-active, .nav-button-active {
  background-color: #003366;
}

/* 主内容区域 */
main {
  flex: 1;
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  align-items: flex-start; /* 让内容紧贴顶部center */
  background-color: #f8f9fa;
  padding: 10px;
}

.container {
  width: 100%;/* 控制内容宽度 */
  max-width: 1200px;/* 最大宽度 */
  height: 100vh; 
  /*flex: 1;  让 `container` 自动填充高度 
  display: flex;
  justify-content: center;
  align-items: center;*/
  padding: 10px;
  background: white;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
